<!--
 * @Descripttion: 
 * @Author: YuZhenJing
 * @Date: 2020-01-05 21:14:35
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:24:11
 -->
<template>
  <div class="tf-page">
    <el-table
      :data="data"
      :default-sort="sortItem"
      :element-loading-text="tableDataParam.elementLoadingText"
      @selection-change="selectedRow"
      @sort-change="sortChange"
      border
      cell-class-name="table-cell-box"
      element-loading-spinner="el-icon-loading"
      :height="height"
      style="width:99.9%;border-radius:3px 3px 0 0"
      v-loading="loading"
    >
      <slot></slot>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="tableDataParam.paginationData.pageList"
      :total="total"
      @current-change="tableDataParam.paginationData.changeCurrentPage"
      @size-change="tableDataParam.paginationData.changePageSize"
      background
      :layout="layout"
      style="margin-top: 10px;"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    // 列表数据
    data: {
      type: Array,
      required: true
    },
    // 总记录数
    total: {
      type: Number,
      required: true
    },
    // 当前页码
    currentPage: {
      type: Number,
      required: true
    },
    // 每页大小
    pageSize: {
      type: Number,
      required: true
    },
    // 加载状态
    loading: {
      type: Boolean,
      required: true
    },
    // 排序项
    sortItem: {
      type: Object
    },
    // 表格高度
    height: {
      type: String,
      default: 'calc(100vh - 175px)'
    },
    // 分页项
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  data() {
    return {
      //分页表格相关参数
      tableDataParam: {
        elementLoadingText: '数据加载中',
        paginationData: {
          pageList: [10, 20, 30, 50, 100],
          changePageSize: this.doChangePageSize,
          changeCurrentPage: this.doChangeCurrentPage
        }
      }
    }
  },
  methods: {
    // 执行查询
    request() {
      this.$emit('request')
    },
    // 排序
    sortChange(sortItem) {
      this.$emit('sortChange', sortItem)
    },
    // 选择下拉框页码
    doChangePageSize(pageSize) {
      this.$emit('doChangePageSize', pageSize)
    },
    // 更改页码
    doChangeCurrentPage(currPage) {
      this.$emit('doChangeCurrentPage', currPage)
    },
    // 选择行
    selectedRow(selection) {
      this.$emit('selectedRow', selection)
    }
  }
}
</script>
<style lang="stylus" scope>
.tf-page
  .el-pagination
    text-align center
  .table-cell-box
    .cell
      white-space nowrap
</style>
